<template>
    <div class=" wrap-table user-p1">
        <div class="headerTop_ukl">
            <ul class="clearfix">
                <li>
                    <p class="p1"><img src="../../assets/images/icon_yanjiuduixiang.png" alt=""/><span>研究对象</span></p>
                    <p class="p3">{{userBasic.Surname}}({{userBasic.ResearchNo}})</p>
                </li>
                <li>
                    <p class="p1"><img src="../../assets/images/icon_ganyuzu.png" alt=""/>{{userBasic.GroupType |GroupType}}</p>
                    <p  class="p3" v-if="userBasic.Period!='3'"><span v-if="userBasic.GroupType==1">{{userBasic.IntensityOfIntervention |IntensityOfIntervention}}</span></p>
                    <p  class="p3" v-else><span v-if="userBasic.GroupType==1">{{userBasic.ChildIntensityOfIntervention |IntensityOfIntervention}}</span></p>
                </li>
                <li>
                    <p class="p1"><img src="../../assets/images/icon_huaiyunqi.png" alt=""/>{{userBasic.Period |Period}}</p>
                    <p class="p3"><span v-if="userBasic.Period==2">预产期：{{userBasic.ExpectedDate}},{{userBasic.PregnancyWeek}}</span></p>
                    <p class="p3"><span v-if="userBasic.Period==3">出生日期：{{userBasic.ChildBirthDate}},{{userBasic.ChildAge}}, {{userBasic.ChildSex|ChildSex}} </span></p>
                      <p class="p3"><span v-if="userBasic.Period==4">出生日期：{{userBasic.ChildBirthDate}},{{getChildAge2(userBasic.ChildBirthDate)}}, {{userBasic.ChildSex|ChildSex}} </span></p>
                </li>
            </ul>
        </div>
        <!---->
        <template>
            <el-table
                    :data="tableData"
                    border
                    v-loading="loading"
                    height="500"
                    element-loading-text="加载中"
                    style="width: 100%"
            >
                <el-table-column
                        prop="VisitDate"
                        label="门诊日期"
                        align="center"
                        min-width="80">
                </el-table-column>
                <el-table-column
                        prop="VisitStartTime"
                        label="开始时间"
                        align="center"
                        min-width="80">
                </el-table-column>
                <el-table-column
                        prop="Nurse"
                        label="哺乳顾问"
                        align="center"
                        min-width="80">
                </el-table-column>
                <el-table-column
                        prop="VisitPeriod"
                        align="center"
                        :formatter="PeriodFilter"
                        label="门诊时研究阶段"
                        min-width="100">
                </el-table-column>
                <el-table-column
                        prop="VisitIntensityOfIntervention"
                        align="center"
                        :formatter="IntensityOfIntervention"
                        label="门诊时干预强度"
                        min-width="100">
                </el-table-column>
                <el-table-column
                        prop="IsRead"
                        align="center"
                        label="门诊处方"
                        min-width="100">
                    <template  slot-scope="scope">
                        <el-button size="small" @click="watchEnc(scope.row)" type="text">查看</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </template>
        <!--分页-->
        <div class="block mg-20-auto">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="pageId"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>
        <el-dialog title="母乳喂养门诊处方" :visible.sync="dialogFormAnli" :append-to-body="true" top="0" width="60%"
                   :close-on-click-modal="false">
                <div style="margin-right: 20px;overflow-x: hidden">
                    <p style="margin-bottom: 15px;font-weight: bold">研究对象：{{userBasic.Surname}}({{userBasic.ResearchNo}}) <span
                            style="padding-left: 15px;">研究阶段：{{userBasic.Period |PeriodFilters}}</span>
                        <span style="padding-left: 15px;">手机号：{{userBasic.Mobile |mobileFilter}}</span>
                    </p>
                    <p>门诊时间：{{formPoint.VisitDate}} <span>{{formPoint.VisitStartTime}}</span></p>
                    <el-form :model="FormAnli"  label-position="left" ref="FormAnli" label-width="40%"
                             class="demo-ruleForm">
                        <el-form-item label="咨询原因-母亲" >
                            <el-checkbox-group v-model="MotherReason">
                                <el-checkbox label="乳头疼痛"></el-checkbox>
                                <el-checkbox label="涨奶"></el-checkbox>
                                <el-checkbox label="乳腺炎"></el-checkbox>
                                <el-checkbox label="乳腺堵塞"></el-checkbox>
                                <el-checkbox label="乳头平坦或者内陷"></el-checkbox>
                                <el-checkbox label="乳房手术史"></el-checkbox>
                                <el-checkbox label="服用了影响母乳喂养的药物"></el-checkbox>
                                <el-checkbox label="母乳不够"></el-checkbox>
                                <el-checkbox label="情绪问题"></el-checkbox>
                                <el-checkbox label="回奶"></el-checkbox>
                                <el-checkbox label="自信心问题"></el-checkbox>
                            </el-checkbox-group>
                        </el-form-item>
                        <el-form-item label="咨询原因-宝宝" >
                            <el-checkbox-group v-model="ChildReason">
                                <el-checkbox label="高胆红素血症"></el-checkbox>
                                <el-checkbox label="先天性疾病"></el-checkbox>
                                <el-checkbox label="早产"></el-checkbox>
                                <el-checkbox label="体重增长不足"></el-checkbox>
                                <el-checkbox label="其他"></el-checkbox>
                            </el-checkbox-group>
                        </el-form-item>
                        <el-form-item>
                            <el-input v-if="ChildReason.indexOf('其他')>-1" v-model="FormAnli.ChildReasonOther"  placeholder="请输入内容"></el-input>
                        </el-form-item>

                        <el-form-item label="主要问题"  class="aloneItem">
                            <el-input type="textarea" v-model="FormAnli.Reason" placeholder="限500字"></el-input>
                        </el-form-item>
                        <el-form-item label="目标"  class="aloneItem is-required">
                            <el-input type="textarea" v-model="FormAnli.Target" placeholder="限500字"></el-input>
                        </el-form-item>
                        <el-form-item label="建议1"  class="aloneItem is-required">
                            <el-input type="textarea" v-model="FormAnli.Advice1" placeholder="限500字"></el-input>
                        </el-form-item>
                        <el-form-item label="建议2(选填)" class="aloneItem ">
                            <el-input type="textarea" v-model="FormAnli.Advice2" placeholder="限500字"></el-input>
                        </el-form-item>
                        <el-form-item label="建议3(选填)" class="aloneItem ">
                            <el-input type="textarea" v-model="FormAnli.Advice3" placeholder="限500字"></el-input>
                        </el-form-item>
                        <el-form-item label="提供资源"  class="aloneItem is-required">
                            <el-input type="textarea" v-model="FormAnli.ProvideResources" placeholder="限500字"></el-input>
                        </el-form-item>
                    </el-form>
                </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormAnli = false">关闭</el-button>
                </el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
	import {mapGetters} from 'vuex'
    import {getChildAge2} from '@/utils/index'
	import {filterPeriod,filterIntensityOfIntervention} from '@/utils/localDic'
	export default {
		name:'userP1',
		data() {
			return {
				tableData:[],
				pageId:1,
				total:null,
				loading:false,
				pageSize:10,
				dialogForm1:false,
				innerVisible:false,
				Period:'',
				maxHeight:'',
				topMAX:'5',
				itemType:'',
				dialogVisible:false,
				ArticleContent:'',
				sysId:'',
				mobile:'',
				researchNo:'',
				userBasic:{
					Surname:'',
					ResearchNo:'',
					ExpectedDate:'',
					Period:'',
					IntensityOfIntervention:'',
					GroupType:''
				},
				changeVal:'2',
				FillInDate:'',
				PeriodFilter(row, column, cellValue, index){
					return cellValue==1?'孕前期':cellValue==2?'怀孕期':'儿童期'
				},
				IsReadFilter(row, column, cellValue, index){
					return cellValue==1?'已读':'未读'
				},
				IntensityOfIntervention(row, column, cellValue, index){
					if(cellValue=='' ||cellValue==undefined){
						return ''
					}
					return cellValue=='1'?'AA': 'A'
				},
				CreateTimeFilter:function(row, column, cellValue, index){
					if(Object.prototype.toString.call(cellValue)=='[object String]'){
						return cellValue.substring(0,10)
					}
				},
				rowlist:[],
				dialogFormAnli:false,
				formPoint:{},
				FormAnli:{
					MotherReason:'',
					ChildReason:'',
					ChildReasonOther:'',
					Reason:'',
					Target:'',
					Advice1:'',
					Advice2:'',
					Advice3:'',
					ProvideResources:''
				},
				MotherReason:[],
				ChildReason:[] //儿童
			}
		},
		components:{

		},
		props:{
			changeIndex:{
				type: String,
			}
		},
		beforeMount:function() {
			let that=this;
			let appHeight=$(window).height();
			let autoheight=(appHeight-300)+'px'
			that.maxHeight=autoheight
		},
		watch:{
			changeIndex:function(index){
				if(index=='8'){
					this.getList()
				}
			}
		},
		computed:{
			...mapGetters([
				'resechObj',
			]),
			LASTTIME:function(){
				let dateAlary=new Date(this.userBasic.ExpectedDate)
				return new Date(dateForm(dateAlary.setMonth(dateAlary.getMonth()-9,dateAlary.getDate()-7)))
			},
			yunzhou:function(){
				return parseInt((WeeksBetw(new Date,this.LASTTIME))/7)
			},
			yuntianshu:function(){
				return parseInt((WeeksBetw(new Date,this.LASTTIME))%7)
			},
			birthWeek(){
				return parseInt((WeeksBetw(new Date,new Date(this.userBasic.ChildBirthDate)))/7)
			},
			birthDay(){
				return parseInt((WeeksBetw(new Date,new Date(this.userBasic.ChildBirthDate)))%7)
			}
		},
		created() {

		},
		methods: {
             getChildAge2(val){ //获取儿童期2年龄
                return val && getChildAge2(val)
            },
			handleSizeChange(val) {       //条数改变
				this.pageSize=val;
				this.getList()
			},
			handleCurrentChange(val) {    //页数改变
				this.pageId = val
				this.getList()
			},
			handleSizeChange1(val) {       //条数改变11
				this.pageSize1=val;
				this.getList()
			},
			watchEnc(row){   //查看
				this.dialogFormAnli=true
				this.FormAnli=row
                this.formPoint=JSON.parse(JSON.stringify(row))
				console.log(row)
				this.MotherReason=(this.FormAnli.MotherReason||'').split(',')
				this.ChildReason=(this.FormAnli.ChildReason||'').split(',')
                console.log(row)
            },
			getList:function(){           //获取一级信息列表
				let that=this
				that.userBasic=''
				if(that.resechObj.mobile ||that.resechObj.researchNo){
					that.sysId='';
					that.mobile=that.resechObj.mobile;
					that.researchNo=that.resechObj.researchNo;
				}
				that.service({
					url:'/ResearchObject/GetParticipantDetail',
					method:'get',
					params:{
						itemType:'11',
						sysId:'',
						period:'',
						researchObjectId:that.sysId,
						mobile:that.mobile,
						researchNo:that.researchNo,
						pageCount:(that.pageId-1),
						pageSize:that.pageSize,
					}}).then(response=>{
                        console.log(response)
                        response.dtData.dtBasic[0]?that.userBasic=response.dtData.dtBasic[0]:''
                        that.tableData=response.dtData.dtBreastPrescription;
                        that.total=parseInt(response.dtData.dtBreastPrescription[0].TotalCount)
				}).catch(data=>{

				})
			},
		},
		mounted:function(){
			let that=this;
			that.sysId=that.$route.query.id;
			that.mobile=that.$route.query.mobile;
			that.researchNo=that.$route.query.researchNo;
			that.getList()
		},
		filters:{
			GroupType:function(val){
				if(val=='' ||val==undefined){
					return ''
				}
				return val=='1'?'A': 'B'
			},
			IntensityOfIntervention:function(val){
             return filterIntensityOfIntervention(val)
        },
        Period:function(val){
             return filterPeriod(val)
        },
			ChildSex(val){
				return val=='1'?'男':val=='2'?'女':'未知'
			},
			PeriodFilters(cellValue){
				if(cellValue=='1'){
					return '孕前期'
				}
				else if(cellValue=='2'){
					return '怀孕期'
				}
				else if(cellValue=='3'){
					return '儿童期'
				}
				else{
					return '-'
				}
			},
			mobileFilter(cellValue) {
				if(cellValue){
					return cellValue.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2");
				}
			},

		}
	}
	function addZero(s){
		return s < 10 ? '0' + s: s;
	}

	function dateForm(data){   //日期格式化
		return   new Date(data).getFullYear()+'-'+addZero((new Date(data).getMonth()+1))+'-'+addZero(new Date(data).getDate())
	}
	function WeeksBetw(date1,date2) {  //计算日期之间相差得天数
		var _dt1=new Date(date1);
		var _dt2=new Date(date2);
		var dt1=_dt1.getTime();
		var dt2=_dt2.getTime();
		return parseInt(Math.abs(dt1- dt2)/1000/60/60/24);//这里是计算天数,如果想获得周数则在该返回值上再除以7
	}

</script>
<style scoped lang="scss">
    .user-p1{
        .headerTop{
            margin-bottom: 30px;
            p{
                font-size:16px;
                margin-bottom: 15px;
                color:#303133;
                span{
                    padding:10px;
                }
                .span1{
                    margin-left: 25px;
                }}
        }
        .user-pi-ul{
            margin:0px auto 20px auto;
            li{
                float: left;
                width: 200px;
                margin-right: 20px;
            }
        }

    }
    .formX{
        .top{
            text-align: center;
        }
        ul{
            li{
                margin:20px;
                h3{
                    color: #606266;
                    font-weight: normal;
                }
                h5{
                    font-weight: normal;
                    margin:5px 0;
                }
                p{
                    color: #999999;
                    margin-bottom: 10px;
                }
            }
        }
    }
    .headerTop_ukl{
        /*border:1px solid #EDF1F7;*/
        padding:5px 20px 10px 0px;
        min-width: 800px;
        width:1000px;
        font-size:14px;
        ul{
            li{
                float: left;
                margin-right: 50px;
                .p1{
                    color:#999999;
                    padding-bottom:5px;
                    display: inline-block;
                    img{
                        display: inline-block;margin-right: 10px;
                    };

                }
                .p3{
                    display: inline-block;
                    padding-left: 10px;
                    color: #666;
                }
            }
        }
    }
    .redspan{color: #fff;width: 30px;height: 25px;background: red;display: inline-block;line-height: 25px;}
    .grespan{color: #fff;width: 30px;height: 25px;background:#009900;display: inline-block;line-height: 25px;}
    .twospan{color: #fff;width: 30px;height: 25px;background:#FC9804;display: inline-block;line-height: 25px;}
    .thrspan{color: #7A6266;width: 30px;height: 25px;background:#FFFF00;display: inline-block;line-height: 25px;}
    .fourspan{color: #fff;width: 30px;height: 25px;background:#92D050;display: inline-block;line-height: 25px;}
</style>

